<template>
  <div class="progress-bar-container">
    <div class="progress-bar-bg">
      <div
        class="progress-bar-fill"
        :style="{ width: `${(value / max) * 100}%`, backgroundColor: getBarColor() }"
      ></div>
    </div>
    <span class="progress-bar-value">{{ value }}</span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    max: {
      type: Number,
      required: true
    },
    status: {
      type: String,
      default: ''
    }
  },
  methods: {
    getBarColor() {
      if (this.status === 'abnormal') {
        return 'orange';
      }
      return 'blue';
    }
  }
};
</script>

<style scoped>
.progress-bar-container {
  width: 100%;
  height: 15px;
  background-color: #ecf0f1;
  border-radius: 5px;
  margin-right: 10px;
  position: relative;
}

.progress-bar-bg {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 5px;
}

.progress-bar-value {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
</style>